<template>
  <div class="address_item">
    <div class="address_item-name">
      <div>{{ item.name }}</div>
      <div>
        <el-checkbox v-model="addressId" :true-value="item.id" />
      </div>
    </div>
    <div class="address_item-phone">
      {{ item.phone }}
    </div>
    <div class="address_item-address">
      {{ item.address.province + item.address.city + item.address.district + item.address.detail }}
    </div>
    <div class="address_item-btn">
      <div class="address_item-btn-edit" @click="dialogFormVisible = true">
        <div>
          <el-icon color="rgb(20, 28, 29)" size="18">
            <Edit />
          </el-icon>
          <span style="color: rgb(20, 28, 29);">编辑</span>
        </div>
      </div>
      <div class="address_item-btn-delete">
        <div>
          <el-icon color="rgb(255, 114, 98)" size="18">
            <Delete />
          </el-icon>
          <span style="color: rgb(255, 114, 98);">删除</span>
        </div>
      </div>
    </div>

    <el-dialog v-model="dialogFormVisible" title="编辑地址" width="500" align-center>
      <el-form size="large" :model="form">
        <el-form-item label="收件人" :label-width="formLabelWidth">
          <el-input placeholder="请输入收件人" v-model="form.item.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input placeholder="请输入手机号" v-model="form.item.phone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="省市区" :label-width="formLabelWidth">
          <el-cascader
            style="width: 100%;"
            size="large"
            :options="region"
            placeholder="请选择省市区"
            @change="handleChange"
            v-model="form.region"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" :label-width="formLabelWidth">
          <el-input placeholder="请输入详细地址" v-model="form.item.address.detail" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">
            修改
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { regionData } from 'element-china-area-data'
import { ref } from 'vue'

const { item } = defineProps(['item'])

// 省市区元数据
const region = ref(regionData)

const addressId = defineModel()

const dialogFormVisible = ref(false)

const formLabelWidth = '70px'

const form = ref({
  item,
  region: [ item.address.provinceId, item.address.cityId, item.address.districtId ]
})

// 当修改省市区时，会调用该方法
const handleChange = (value: any) => {
  form.value.region = value
  console.log(form.value)
}
</script>

<style lang="less" scoped>
  .address_item {
    margin-top: 20px;
    box-sizing: border-box;
    padding: 17px;
    border-radius: 10px;
    background-color: rgba(163, 170, 171, 0.05);
    width: 365px;
    margin-right: 65px;

    .address_item-name {
      display: flex;
      justify-content: space-between;
      align-items: center;

      div:first-child {
        color: rgb(20, 28, 29);
        font-size: 20px;
        font-weight: 700;
      }

      div:last-child {
        :deep(.el-checkbox) {
          --el-checkbox-input-height: 20px;
          --el-checkbox-input-width: 20px;
        }

        :deep(.el-checkbox__inner:after) {
          width: 5px;
          height: 10px;
          left: 6px;
          top: 1.49px;
        }
      }
    }

    .address_item-phone {
      color: rgb(20, 28, 29);
      font-size: 16px;
      font-weight: 400;
      margin-top: 15px;
    }

    .address_item-address {
      width: 90%;
      color: rgb(20, 28, 29);
      font-size: 16px;
      font-weight: 400;
      margin-top: 15px;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .address_item-btn {
      margin-top: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;

      div {
        width: 48%;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        div {
          display: flex;
          align-items: center;
          justify-content: center;

          span {
            font-size: 12px;
            font-weight: 400;
            display: inline-block;
            margin-left: 4px;
          }
        }
      }

      .address_item-btn-edit {
        border-radius: 8px;
        background: rgba(163, 170, 171, 0.1);
        transition: all 0.3s;
      }

      .address_item-btn-edit:hover {
        background: rgba(117, 122, 122, 0.1);
      }

      .address_item-btn-delete {
        border-radius: 8px;
        background: rgba(255, 114, 98, 0.1);
        transition: all 0.3s;
      }

      .address_item-btn-delete:hover {
        background: rgba(255, 64, 43, 0.1)
      }
    }
  }
</style>